<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //js事件又称为监听，表示当我们做了某件事情在js中触发某个功能

        //1.第一种方式
        function hello() {
            alert("hello");
        }

        window.onload = function () {
            //第二种方式

            //获取元素对象
            // var input = document.querySelector("input");

            //为元素绑定事件
            // input.onclick = function () {
            //  alert("我被点击了");
            // }


            // var box = document.querySelector(".box");
            // box.onmouseover = function () {
            //     box.style.fontSize = "150px";
            // }

            // box.onmouseout = function () {
            //     box.style.fontSize = "15px";
            //     box.style.backgroundColor = "yellow";
            // }


            //当文本框获取光标
            var username = document.querySelector("#username");
            username.onfocus = function () {
                this.style.backgroundColor = "yellow";
                document.querySelector(".box2").style.display = "block";
            }

            username.onblur = function () {
                this.style.backgroundColor = "white";
                document.querySelector(".box2").style.display = "none";
            }


            //当表单提交时触发
            var sub = document.querySelector("#sub");//整个表单

            sub.onsubmit = function () {
                console.log("提交");
                //进行一些值的判断 如果不满足则返回false
                return false;//返回false不提交   返回true提交
            }



        }

        /*
         此时onxxx 叫做事件
        常用的事件:
        onclick 鼠标单击事件
        onblur 元素失去标签
        onfocus 元素获得焦点
        onload 某个页面或图形完全被加载
        onsubmit 当表单提交时触发
        onmouseover 鼠标移入
        onmouseout  鼠标移除
        onchange 当表单元素内容发生改变触发

        
        */


    </script>
</head>

<body>
    <!-- <input type="button" value="点击" onclick="hello()"> -->
    <input type="button" value="点击">


    <div class="box" style="width: 100px; height: 100px; background-color: red;">
        555
    </div>


    <form id="sub" action="#" method="post">
        用户名<input type="text" name="username" id="username">
        <input type="submit" value="确定">
    </form>

    <div class="box2" style="width: 100px; height: 100px; border: 1px red solid; display: none;"></div>
</body>

</html>